<template>
    <view class="lottery_box">
        <nav-bar ref="navBar" type="transparentFixed" :titleCenter="false" bgColor="themeBgColor" transparentFixedFontColor="#FFF"
            fontColor="#FFF" :shadow="false">
            <view class="mybargain_box">
                <view class="title">我的砍价</view>
                <!-- <view class="bargain_rule">砍价规则</view> -->
            </view>
            <view class="mybargain_box" slot="transparentFixed">
                <view class="title"></view>
                <!-- <view class="bargain_rule">砍价规则</view> -->
            </view>
        </nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="user_box" :style="{ paddingTop: statusBarHeight + 'px' }">
            <image :src="dataInfo.userHeadImg" mode="fill"></image>
            <text>{{ dataInfo.userNickName }} 喊你来帮忙砍价</text>
            <!-- 商品信息 -->
        </view>
        <view class="bargain_goods_item">
            <view class="bargain_goods_bg"></view>
            <view class="bargain_goods_desktop"></view>
            <view class="bargain_goods_info">
                <image :src="dataInfo.img" mode="aspectFill"></image>
                <view class="info">
					<view class="name">{{ dataInfo.name }}</view>
					<view class="people">
						<!-- <text>99人正在砍价</text> -->
						<!-- <view>|</view> -->
						<text>砍{{ dataInfo.cutRemaining }}刀</text>
					</view>
					<view class="price_box">
						最低
						<view class="price">
							{{ dataInfo.cutMinPrice }}
						</view>
						<text>{{ dataInfo.priceShop }}</text>
					</view>
                </view>
            </view>
        </view>
        <!-- 砍价 -->
        <view class="bargain_now_box">
            <view class="title">
                已砍<text>{{ dataInfo.hasCutMoney }}</text>元，仅差<text>{{ dataInfo.cutBalance }}</text>元
            </view>
            <!-- 进度条 -->
            <progress :percent="dataInfo.progress" :border-radius="50" backgroundColor="#f7f7f7" activeColor="$themeColor" />
            <!-- 时间 -->
            <view class="bargain_time" v-if="dataInfo.isTimeOut">
                订单已超时
            </view>
            <view class="bargain_time" v-else>
                <view>{{ countdownHour }}</view>
                <text>:</text>
                <view>{{ countdownMinute }}</view>
                <text>:</text>
                <view>{{ countdownSecond }}</view>
                后结束
            </view>
            <view class="btn_box">
                <button v-if="userInfo.uid == dataInfo.userUid" @click="onBuy">立即购买</button>
                <button v-else-if="dataInfo.canCut" @click="onHelpBargain">砍一刀</button>
                <button v-else @click="onBargain">我也要砍价</button>
                <!-- #ifdef APP-PLUS -->
                <button @click="onAppShare">邀请好友砍价</button>
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <button open-type="share">邀请好友砍价</button>
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <button @click="onH5Share">邀请好友砍价</button>
                <!-- #endif -->
            </view>
        </view>
        <!-- 好友助力 -->
        <view class="friend_rank_box">
            <image class="rank_img" src="../../static/icon/bargain/ic_rankingList.png" mode="aspectFill"></image>
            <view class="friend_box" v-for="(item,index) of userList" :key="index">
                <view class="friend">
                    <image :src="item.userHeadImg" mode=""></image>
                    <view class="friend_name">
                        {{item.userNickName}}
                    </view>
                </view>
                <text>砍掉￥{{item.cutMoney}}元</text>
            </view>
            <view class="no_data" v-if="userList.length == 0">
                暂无砍价记录
            </view>
        </view>
    </view>
</template>

<script>
    import { appShare, 
        publicShare
    } from '@/config/utils';
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                scrollTop: 0,
                statusBarHeight: 0,
                pageScroll: 0,
                cutNo: 0,
                dataInfo: {
                    "cutNo": "",
                    "orderNo": "",
                    "userUid": 0,
                    "goodsId": 0,
                    "specId": 0,
                    "userNickName": "",
                    "userHeadImg": "",
                    "endTime": "",
                    "cutPeoples": 0,
                    "cutRemaining": 0,
                    "cutMoney": 0,
                    "cutBalance": 0,
                    "name": "",
                    "img": "",
                    "priceShop": "",
                    "cutMinPrice": "",
                    "hasCutMoney": 0,
                    "isTimeOut": false,
                    "progress": 0,
                    "share": {},
                    "goodsRecommendShare": {},
                },
                buyState: 1000,
                countdownHour: 0,
                countdownMinute: 0,
                countdownSecond: 0,
                pageNo: 1,
                pages: 1,
                userList: [],
            };
        },
        computed: {
            ...mapState(['userInfo'])
        },
        //第一次加载
        onLoad(e) {
            if (e.cutNo) {
                this.cutNo = e.cutNo;
            }
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
            this.judgeLogin(() => {
                this.pageData();
            });
            this.loadData();
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            onAppShare() {
                // #ifdef APP-PLUS
                appShare(this.dataInfo.share);
                // #endif
            },
            onH5Share() {
                uni.showToast({
                    title: "点击右上角分享给好友",
                    icon: "none"
                });
            },
            onBargain(){
                uni.redirectTo({
                    url: "/pages/bargain/bargainList"
                });
            },
            onBuy() {
                let goodsInfo = {
                    goodsId: this.dataInfo.goodsId,
                    goodsNum: 1,
                    goodsSpecId: this.dataInfo.specId,
                };
                this.$store.commit('setPreOrderData', {
                    goods: [goodsInfo],
                    shopId: this.dataInfo.shopId,
                    cutNo: this.cutNo,
                    goodsPackage: false,
                    shoppingCart: false,
                });
                uni.navigateTo({
                    url: '/pages/shopCar/confirmOrder'
                });
            },
            pageData() {
                this.$http
                    .get('api/order_mall_cut/v1/cut_detail', {
                        cutNo: this.cutNo,
                    })
                    .then(res => {
                        this.dataInfo = res;
                        if(!res.isTimeOut){
                            this.getCountdown();
                        }
                        // #ifdef H5
                        publicShare(res.share);
                        // #endif
                    });
            },
            onHelpBargain(){
                this.$http
                    .get('api/order_mall_cut/v1/join_cut', {
                        cutNo: this.cutNo,
                    })
                    .then(res => {
                        this.pageData();
                        this.pageNo = 1;
                        this.pages = 1;
                        this.loadData();
                    });
            },
            loadData() {
                if (this.pageNo <= this.pages) {
                    let httpData = {
                        pageNo: this.pageNo,
                        pageSize: 15,
                        cutNo: this.cutNo,
                    };
                    this.$http
                        .post(
                            'api/order_mall_cut/v1/cut_users', httpData, {
                                load: false
                            }
                        )
                        .then(res => {
                            uni.stopPullDownRefresh();
                            this.pages = res.pages;
                            if (this.pageNo == 1) {
                                this.userList = res.data;
                            } else {
                                this.userList = this.userList.concat(res.data);
                            }
                            if (res.data.length > 0) {
                                this.pageNo = this.pageNo + 1;
                            }
                        });
                }
            },
            getCountdown() {
                let spikeEndTime = this.dataInfo.endTime.replace(/-/g, '/');
                let endTime = new Date(spikeEndTime).getTime();
                const _this = this;
                recursion();

                function recursion() {
                    let currentTime = new Date().getTime();
                    if (currentTime > endTime) {
                        _this.buyState = 3000;
                    } else {
                        _this.buyState = 1000;
                        let surplus = (endTime - currentTime) / 1000;
                        let hour = parseInt(surplus / 3600);
                        let minute = parseInt((surplus - hour * 3600) / 60);
                        let second = parseInt(surplus - hour * 3600 - minute * 60);
                        if (hour < 10) {
                            hour = '0' + hour;
                        }
                        if (minute < 10) {
                            minute = '0' + minute;
                        }
                        if (second < 10) {
                            second = '0' + second;
                        }
                        _this.countdownHour = hour;
                        _this.countdownMinute = minute;
                        _this.countdownSecond = second;
                        setTimeout(() => {
                            recursion();
                        }, 1000);
                    }
                }
            },

        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        onPageScroll(e) {
            this.$refs.navBar.pageScroll(e);
            this.pageScroll = e.scrollTop;
        },
        //页面下来刷新
        onPullDownRefresh() {
            this.pageNo = 1;
            this.pages = 1;
            this.loadData();
        },
        //页面上拉触底
        onReachBottom() {
            this.loadData();
        },
        //用户点击分享
        onShareAppMessage(e) {
            return {
                title: this.dataInfo.userNickName + " 喊你来帮忙砍价"
            };
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .mybargain_box {
        display: flex;
        //justify-content: space-between;
        align-items: center;
        width: calc(100vw - 106rpx);

        .title {
            margin: 0 auto;
            display: flex;
            padding-left: 48rpx;
            //justify-content: space-between;			
        }

        .bargain_rule {
            font-size: 28rpx;
            padding-right: 32rpx;
        }

    }

    .lottery_box {
        min-height: 100vh;
        background-color: #f2f2f2;
        @include bis("../../static/icon/theme/bg_bargaining.png");
		background-position: center top;
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 100%;
        padding-top: 88rpx;
    }

    .user_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 32rpx;

        image {
            width: 120rpx;
            height: 120rpx;
            background-color: #fff;
            border-radius: 50%;
        }

        text {
            font-size: 32rpx;
            margin-top: 18rpx;
            color: #fff;
        }

    }

    .bargain_goods_item {
        margin-top: 36rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 60rpx;
        height: 264rpx;
        width: 100%;

        .bargain_goods_bg {
            background-image: linear-gradient(180deg,
                #ffffff 0%,
                $viceColor4 100%);
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            flex: 1;
            width: 646rpx;
            z-index: 2;
        }

        .bargain_goods_desktop {
            position: absolute;
            bottom: 0;
            left: 20rpx;
            width: 710rpx;
            height: 60rpx;
            flex-shrink: 0;
            z-index: 2;
            @include bis("../../static/icon/theme/ic_base.png");
        }

        .bargain_goods_info {
            position: absolute;
            top: 0;
            left: 35rpx;
            right: 35rpx;
            bottom: 0;
            z-index: 3;
            display: flex;
            padding: 24rpx 41rpx 40rpx 40rpx;

            image {
                background-color: #FFf;
                width: 200rpx;
                height: 200rpx;
                border-radius: 8rpx;
				flex-shrink: 0;
            }

            .info {
                margin-left: 30rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
				padding-bottom: 30rpx;
				.name {
					font-size: 28rpx;
					color: #333333;
					@include bov(2);
				}

				.people {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #ff304b;

					text {
						&:nth-child(1) {
							margin-right: 12rpx;
						}

						&:nth-child(3) {
							margin-left: 12rpx;
						}
					}
				}

				.price_box {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #333333;

					//align-items: center;
					.price {
						font-size: 28rpx;
						font-weight: bold;
						color: #ff304b;
					}

					text {
						margin-left: 17rpx;
						color: #ff304b;
						text-decoration: line-through;
					}
				}
            }
        }
    }

    .bargain_now_box {
        margin: 40rpx 32rpx;
        background-color: #fff;
        padding: 24rpx 36rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 28rpx;
            color: #333333;

            text {
                color: #ff243b;
                ;
            }
        }

        >progress {
            margin-top: 26rpx;
            height: 12rpx;
            width: 566rpx;

            /deep/ .uni-progress-bar {
                // 这主要是加上deep才能改变它原来的样式 
                border-radius: 10rpx !important;

                .uni-progress-inner-bar {
                    border-radius: 10rpx !important;
                }
            }
        }

        .bargain_time {
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #333333;
            display: flex;
            align-items: center;

            view {
                margin: 8rpx;
                text-align: center;
                line-height: 42rpx;
                //padding: 5rpx;
                min-width: 38rpx;
                height: 42rpx;
                background-color: #333333;
                border-radius: 8rpx;
                color: #fff;

                &:nth-child(1) {
                    margin-left: 0;
                }
            }
        }

        .btn_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 44rpx;

            button {
                padding: 0 48rpx;
                height: 64rpx;
                color: #fff;
                font-size: 28rpx;
                line-height: 64rpx;
                border-radius: 44rpx;

                &:nth-child(1) {
                    flex: 3;
                    @include theme('gradient_bg')
                }

                &:nth-child(2) {
                    flex: 2;
                    margin-left: 30rpx;
                    background-color: #ff403f;
                }
            }
        }
    }

    .friend_rank_box {

        margin: 80rpx 32rpx 60rpx 32rpx;
        position: relative;
        padding: 32rpx;
        background-color: #fff;
        border-radius: 20rpx;

        .rank_img {
            position: absolute;
            left: 50%;
            top: 0;
            width: 278rpx;
            height: 64rpx;
            transform: translateX(-50%) translateY(-50%);
        }

        .friend_box {
            padding: 24rpx 0;
            border-bottom: 1rpx solid #ffeed6;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:nth-last-child(1) {
                border-bottom: none;
            }

            .friend {
                display: flex;
                align-items: center;

                image {
                    margin-right: 32rpx;
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }

                .friend_name {
                    font-size: 28rpx;
                    color: #333333;
                }
            }

            text {
                font-size: 28rpx;

                color: #ff243b;
            }

        }
    }

    .no_data {
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #999;
    }
</style>
